<template>
  <!-- <van-overlay  @click="show = false" class="spinner"> -->
  <!-- <van-loading type="spinner" color="#1989fa" :show="show" class="spinner" /> -->
  <!-- </van-overlay> -->

  <div class="avatar-warp">
    <div class="Avatar-container">
      <img :src="user_info.headImages" alt="" class="headImages">
      <van-uploader :after-read="afterRead">
        <van-button icon="add-o">上传头像</van-button>
      </van-uploader>
    </div>
    <!-- <van-button type="primary" class="block_gradual" :loading="formData.loading" native-type="submit" @click="submit">确定</van-button> -->
  </div>
</template>
<script>
import axios from 'axios'
import { reactive, computed, ref } from "vue";
import { useRouter } from 'vue-router'
import { Toast } from "vant";
import { useStore } from "vuex";
import { compressImg } from "@/utils/phone";
import { upload, editHeadImage } from "@/api/user";
export default {
  setup() {
    const store = useStore();
    const router = useRouter()
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const show = ref(true)

    const afterRead = (file) => {
      Toast.loading({
        duration: 0,
        message: '上传中...',
        forbidClick: true,
      });

      console.log(file.file.type)
      const fd = new FormData()
      fd.append('file', file.file)
      const isImage = file.file.type === 'image/png' || file.file.type === 'image/jpg' || file.file.type === 'image/jpeg'
      const isLt5M = file.size < 1024 * 1024 * 10
      if (!isImage) {
        return Toast('上传只能是png,jpg,jpeg格式!')
      }
      // if (!isLt5M) {
      //   Toast('上传图片大小不能超过 5MB!')
      // }
      if (isImage && isLt5M) {
        this.compressImg(file.file).then(res => {
          file = res
        })
      }
      let config = {
        headers: { //添加请求头
          "Content-Type": "multipart/form-data"
        }
      };
      try {
        axios.post("http://test.kuanqing.art" + "/api/common/upload", fd, config).then(async res => {
          console.log("res", res);
          if (res.data.success) {
            Toast.clear()
            Toast(res.data.message);
            formData.headImage = res.data.data
            submit()
          }
        })
      } catch (error) {
        Toast(error.message);
        Toast.clear()
      }


    }
    const submit = async () => {
      formData.loading = true
      editHeadImage(formData).then(async res => {
        if (res.data.success) {
          await store.dispatch('user/getUserAll')
          router.go(-1)
        }
      })
      formData.loading = false
    }
    const formData = reactive({
      headImage: '',
      loading: false
    })
    return {
      user_info,
      formData,
      afterRead,
      submit,
      show
    }

  }
}
</script>
<style lang="less" scoped>
&:deep(.van-button--normal) {
  background: linear-gradient(-90deg, #37dc6d, #34d1f9);
  border: none;
  border-radius: 46px;
  width: 682px;
  height: 92px;
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.spinner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-warp {
  margin: 0.4rem 0;
  padding: 0 0.4rem;
}

.Avatar-container {
  width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0.4rem auto 1rem;
  // background: #292b2a;
  border-radius: 0.33333rem;

  .block_gradual {
    width: 80% !important;
  }

  .headImages {
    margin-bottom: 1rem;
    width: fit-content;
    height: 5rem;
    width: 5rem;
    margin-top: 1rem;
    border-radius: 8px;
  }
}

/deep/.van-uploader__upload {
  border-radius: 50% !important;
}
</style>